<template>
  <div>
      <el-row>
        <breadcrumb class="breadcrumb-container"></breadcrumb>
      </el-row>
      <el-button type="primary" size="small" @click="visible = true;isAdd = true">添加协议</el-button>
      <el-table :data="date" size="small" :header-cell-style="{background:'#f2f2f2'}" class="mt20 mb20">
        <el-table-column align="center" label="协议名称" prop="name"></el-table-column>
        <el-table-column align="center" label="类型编码" prop="code"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleFileClickUpdate(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" class="err" @click="handleFileDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :size="page.size" :current.sync="page.current" @current-change="handleClickCurrentChange"></el-pagination>

      <el-dialog title="协议管理" :visible.sync="visible" :before-close="handleCloseCallback" width="400px">
        <el-form :model="AddForm" label-width="80px" :rules="rules" ref="form" v-loading="editLoading" size="small" class="mt20">
          <el-form-item label="协议名称" prop="name">
            <el-input placeholder="请输入协议名称" v-model="AddForm.name"></el-input>
          </el-form-item>
          <el-form-item label="类型编码" prop="type">
            <el-select placeholder="请选择协议编码" v-model="AddForm.type">
              <el-option :value="1" label="ws_account_service_ag_v01"></el-option>
              <el-option :value="2" label="ws_pay_issue_service_ag_v01"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传文件" prop="file">
            <el-upload :action="url" v-model="AddForm.file" :limit="1" :file-list="fileList" show-file-list :before-upload="handleBeforeUpload" :on-success="handleFileSuceess">
              <el-button type="primary" size="small">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="primary" size="small" @click="handleClickSubmit" :loading="btnLoading">确认配置</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { FileSubMit, pactInit, pactCurrentPage, FileDelete, FileEdit, fileEditSubmit } from '@/api/setting'
import { mapGetters } from 'vuex'

export default {
  name: 'pactSetting',
  components: {
    Breadcrumb
  },
  data() {
    return {
      visible: false,
      date: [],
      page: {
        total: 0,
        size: 10,
        current: 1
      },
      AddForm: {
        name: '',
        type: 1,
        file: ''
      },
      fileList: [],
      rules: {
        name: [{ required: true, trigger: 'blur', message: '必须填写哦～' }],
        type: [{ required: true, trigger: 'change', message: '必须选择哦～' }],
        file: [{ required: true, trigger: 'change', message: '必须上传哦～' }]
      },
      url: process.env.BASE_API + '/uploadFile',
      editLoading: false,
      btnLoading: false,
      isAdd: true,
      edit_id: null
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      pactInit(this.id).then(response => {
        if (response.data.errorCode === 0) {
          this.page.total = response.data.result.total
          this.page.size = response.data.result.per_page
          this.page.current = response.data.result.current_page
          this.date = response.data.result.data
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickCurrentChange(v) {
      pactCurrentPage(this.id, v).then(response => {
        if (response.data.errorCode === 0) {
          this.page.current = response.data.result.current_page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleBeforeUpload(file) {
      const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      if (!isDocx) {
        this.$message.error('文件必须是docx格式哦～')
      }
      return isDocx
    },
    handleFileSuceess(res) {
      this.AddForm.file = res
    },
    handleClickSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          if (this.isAdd) {
            FileSubMit(this.id, this.AddForm).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.init()
                this.visible = false
                this.btnLoading = false
                this.$refs['form'].resetFields()
              } else {
                this.btnLoading = false
                this.$message.error(response.data.errorMsg)
              }
            })
          } else {
            fileEditSubmit(this.edit_id, this.AddForm).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.btnLoading = false
                this.visible = false
                this.isAdd = true
                this.edit_id = null
                this.$refs['form'].resetFields()
                this.fileList = []
                this.init()
              } else {
                this.btnLoading = false
                this.$message.error(response.data.errorMsg)
              }
            })
          }
        }
      })
    },
    handleCloseCallback(done) {
      this.$refs['form'].resetFields()
      this.fileList = []
      this.$nextTick(_ => {
        done()
      })
    },
    handleFileDelete(id) {
      const del = confirm('是否删除该协议？')
      if (del) {
        FileDelete(id).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            this.init()
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    handleFileClickUpdate(id) {
      this.visible = true
      this.editLoading = true
      this.isAdd = false
      FileEdit(id).then(response => {
        this.edit_id = id
        if (response.data.errorCode === 0) {
          this.AddForm.name = response.data.result.name
          this.AddForm.type = response.data.result.code
          this.AddForm.file = response.data.result.file
          this.fileList.push({ name: response.data.result.name, file: response.data.result.file })
          this.editLoading = false
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  }
}
</script>